<template>
	<div class="design-container">
		
		<div class="work">
			<design-box v-for="(item,index) in element" :key="index" :config="item" @select="changeSelect"
				:showPoint="selectId==item.id">
				<div class="person"></div>
			</design-box>
			<!-- <img src="http://pro.xhzq.com:6355/hostool/SysAnnexesFile/download?fileId=1524642308610461696" width="100%"> -->
		</div>
		
	</div>
</template>

<script>
	import DesignBox from '@/components/DesignBox'
	export default {
		components: {
			DesignBox
		},
		data() {
			return {
				selectId: null,
				selectData: null,
				element: [{
					id: 1,
					width: 40,
					height: 40,
					top: 0,
					left: 100,
				},{
					id: 2,
					width: 40,
					height: 40,
					top: 0,
					left: 0,
				}],
			}
		},
		methods: {
			changeSelect(data) {
				this.selectId= data.id;
				this.selectData = data;
			}
		}
	}
</script>

<style scoped lang="scss">
	.design-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: #fff;
		overflow: hidden;
	}

	.person {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: #fff;
		background: orange;
	}
	
	.work{
		position: relative;
		width: 80%;
		height: 600px;
		padding: 32px;
		border-radius: 4px;
	}
</style>
